<template>
  <div>
    <div class="cake-floor" >
      <!-- 第一层 -->
      <div class="floor-title">
        <span>人气推荐</span>
        <router-link to="/">更多</router-link>
      </div>
      <ul v-if="hotData">
        <li class="cake-items" v-for="h in hotData.results" :key="h.cid">
          <img :src="h.cimg" alt="" />
          <div class="cake_card">
            <span class="s1">{{h.cname}}</span>
            <span class="s2">¥{{h.cprice}}</span>
          </div>
        </li>
      </ul>
      <!-- 第二层 -->
      <div class="floor-title">
        <span>生日蛋糕</span>
        <router-link to="/">更多</router-link>
      </div>
      <ul v-if="birthData">
        <li class="cake-items" v-for="h in birthData.results" :key="h.cid">
          <img :src="h.cimg" alt="" />
          <div class="cake_card">
            <span class="s1">{{h.cname}}</span>
            <span class="s2">¥{{h.cprice}}</span>
          </div>
        </li>
      </ul>
      <!-- 第三层 -->
      <div class="floor-title">
        <span>面包甜点</span>
        <router-link to="/">更多</router-link>
      </div>
      <ul v-if="breadData">
        <li class="cake-items" v-for="h in breadData.results" :key="h.cid">
          <img :src="h.cimg" alt="" />
          <div class="cake_card">
            <span class="s1">{{h.cname}}</span>
            <span class="s2">¥{{h.cprice}}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotData: "", //人气数据
      birthData:'',
      breadData:'',
    };
  },
  mounted() {
    this.getHotData();
    this.getBirthData()
    this.getBreadData()
  },
  methods: {
    getHotData() {
      let url = "http://localhost:3000/master/hot_cake";
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.hotData = res.data;
      });
    },
    getBirthData(){
      let url = "http://localhost:3000/master/birth_cake";
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.birthData = res.data;
      });
    },
    getBreadData(){
      let url = "http://localhost:3000/master/bread_cake";
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.breadData = res.data;
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.cake-floor{
  width: 1200px;
  margin: 20px auto;
  .floor-title {
    padding: 5px 10px;
    display: flex;
    border-bottom:3px solid #d6ad84;
    justify-content: space-between;
    span {
      font-size: 22px;
      font-weight: 400;
      color: #3c2314;
    }
    a {
      font-size: 14px;
      text-align: center;
      margin-top: 5px;
    }
    a:hover {
      color: #aa8764;
    }
  }
  ul {
    width: 100%;
    height: 300px;
    display: flex;
    margin-bottom: 20px;
    li {
      width: 280px;
      display: flex;
      margin: 10px;
      justify-content: space-between;
      position: relative;
      cursor: pointer;
      img {
        width:100%;
        height:100%;
      }
      .cake_card {
        position: absolute;
        bottom: 20px;
        left: 40px;
        border: 1px solid rgb(195, 195, 195);
        border-radius: 3px;
        line-height: 25px;
        width: 200px;
        span {
          display: block;
          text-align: center;
        }
        .s1 {
          color: #3c2314;
        }
        .s2 {
          color: #aa8764;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
<style src="../assets/css/index.css" scoped></style>

